<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%= basePath %>"/>
    <title>茶韵博客 | 品茶之道，人生之味</title>
    <meta name="description" content="围绕茶主题的个人主页，分享茶生活、茶文化" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="<%=basePath%>images/img/favicon.ico" />
    
    <!-- 原有 CSS 引入 -->
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css" />
    <link rel="stylesheet" href="<%=basePath%>css/simple-line-icons.css" />
    <link rel="stylesheet" href="<%=basePath%>css/icofont.css" />
    <link rel="stylesheet" href="<%=basePath%>css/magnific-popup.css" />
    <link rel="stylesheet" href="<%=basePath%>css/animate.css" />
    <link rel="stylesheet" href="<%=basePath%>css/nice-select.css" />
    <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css" />
    <link rel="stylesheet" href="<%=basePath%>css/owl.carousel.min.css" />
    <link rel="stylesheet" href="<%=basePath%>css/mainmenu.css" />
    <link rel="stylesheet" href="<%=basePath%>css/style.css" />
    <link rel="stylesheet" href="<%=basePath%>css/responsive.css" />
    <script src="<%=basePath%>js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- 新增参考图风格主体样式 -->
    <style>
        /* 页面整体背景 */
        body {
            background: #f8f8f8 url("<%=basePath%>images/img/background-pattern.png") repeat; 
            margin: 0;
            padding-bottom: 60px; 
            font-family: "Arial", sans-serif;
            color: #333;
        }
        
        /* 主体布局容器 */
        .blog-wrapper {
            display: flex;
            gap: 40px;
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }
        
        /* 左侧文章列表 */
        .blog-content {
            flex: 2.5;
        }
        
        .blog-post {
            background: #fff;
            padding: 30px;
            margin-bottom: 40px;
            border-radius: 5px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            border: 1px solid #eee;
        }
        
        .blog-post h2 {
            margin-top: 0;
            color: #3a3a3a;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }
        
        .post-meta {
            color: #777;
            font-size: 14px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
        }
        
        .post-meta .author {
            font-weight: 600;
            margin-right: 20px;
            color: #555;
        }
        
        .post-meta .date {
            font-style: italic;
        }
        
        .blog-post img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 25px;
            border: 1px solid #eee;
        }
        
        .blog-post p {
            line-height: 1.8;
            margin-bottom: 25px;
            color: #555;
        }
        
        .read-more {
            display: inline-block;
            color: #5a8c4c;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
            font-size: 15px;
            position: relative;
            padding-right: 20px;
        }
        
        .read-more:after {
            content: "→";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: right 0.3s;
        }
        
        .read-more:hover {
            color: #3c5d2d;
        }
        
        .read-more:hover:after {
            right: -5px;
        }
        
        /* 右侧侧边栏 */
        .blog-sidebar {
            flex: 1;
        }
        
        .sidebar-section {
            background: #fff;
            padding: 30px;
            margin-bottom: 40px;
            border-radius: 5px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            border: 1px solid #eee;
        }
        
        .sidebar-section h3 {
            margin-top: 0;
            color: #3a3a3a;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
            position: relative;
        }
        
        .sidebar-section h3:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #5a8c4c;
        }
        
        .sidebar-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-section li {
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .sidebar-section li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .sidebar-section a {
            color: #555;
            text-decoration: none;
            transition: color 0.3s;
            font-weight: 600;
            display: block;
        }
        
        .sidebar-section a:hover {
            color: #5a8c4c;
        }
        
        .comment-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .comment-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .comment-item p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 10px;
            font-style: italic;
        }
        
        .comment-author {
            font-weight: 600;
            color: #3a3a3a;
        }
        
        .ad-banner {
            background: #f0f0f0;
            border: 1px dashed #ddd;
            padding: 30px 20px;
            text-align: center;
            margin-top: 20px;
            border-radius: 5px;
        }
        
        .ad-banner h4 {
            font-size: 18px;
            color: #3a3a3a;
            margin-bottom: 10px;
        }
        
        .ad-banner p {
            color: #777;
            margin-bottom: 15px;
        }
        
        .ad-banner a {
            color: #5a8c4c;
            font-weight: 600;
            text-decoration: none;
        }
        
        .about-content {
            color: #555;
            line-height: 1.8;
        }
        
        .site-pages {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .page-link {
            display: block;
            padding: 10px;
            background: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 4px;
            color: #555;
            text-decoration: none;
            transition: all 0.3s;
            font-weight: 600;
        }
        
        .page-link:hover {
            background: #5a8c4c;
            color: #fff;
            border-color: #5a8c4c;
        }
        
        /* 页脚微调 */
        footer {
            background-color: #fff;
            border-top: 1px solid #eee;
            padding: 20px 0;
            margin-top: 40px;
            text-align: center;
        }
        
        footer p {
            color: #999;
            margin: 0;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .blog-wrapper {
                flex-direction: column;
            }
            
            .blog-content, .blog-sidebar {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 原有头部导航，保持不变 -->
        <header>
            <div class="header-area bg-gray">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-4">
                            <div class="logo">
                                <a href="<%=basePath%>views/user/index.jsp"><img src="<%=basePath%>images/img/logo/logo.png" alt=""></a>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-8">
                            <div class="header-main-content">
                                <div class="main-menu-area d-none d-lg-block">
                                    <nav>
                                        <ul>
                                            <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>
                                            <li><a href="<%=basePath%>views/user/about-us.jsp">关于我们</a></li>
                                            <li><a href="<%=basePath%>user/shop">商城 <i class="icofont icofont-simple-down"></i></a>
                                                <ul class="sub-menu">
                                                    <li><a href="<%=basePath%>user/cart">购物车</a></li>
                                                    <li><a href="<%=basePath%>user/orders">订单</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#"> 我的 <i class="icofont icofont-simple-down"></i></a>
                                                <ul class="sub-menu">
                                                    <li><a href="<%=basePath%>user/account" class="active">我的账户</a></li>
                                                    <li><a href="<%=basePath%>views/login.jsp">登录注册</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="<%=basePath%>views/user/blog.jsp">博客</a></li>
                                            <li><a href="<%=basePath%>views/user/contact-us.jsp"> 联系我们</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="right-blok-box">
                                    <div class="mine-cart-box">
                                        <a href="<%=basePath%>user/cart"><i class="icon-handbag"></i><span id="cart-total">0</span></a>
                                    </div>
                                    <div class="top-login-menu">
                                        <div class="top-login-inner">
                                            <c:choose>
                                                <c:when test="${not empty sessionScope.customerName}">
                                                    <a href="<%=basePath%>user/account"><i class="icon-user"></i> <span class="user-login">${sessionScope.customerName}</span> </a>
                                                </c:when>
<%--                                                <c:otherwise>--%>
<%--                                                    <a href="<%=basePath%>views/login.jsp"><i class="icon-user"></i> <span class="user-login">Login</span> </a>--%>
<%--                                                </c:otherwise>--%>
                                            </c:choose>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- 新主体：参考图风格博客列表 + 侧边栏 -->
        <div class="blog-wrapper">
            <!-- 左侧文章列表 -->
            <div class="blog-content">
                <article class="blog-post">
                    <h2>中国茶文化的千年传承与演变</h2>
                    <div class="post-meta">
                        <span class="author">茶韵人生</span>
                        <span class="date">2025年7月26日</span>
                    </div>
                    <img src="<%=basePath%>images/img/blog/lg-blog-bg.jpg" alt="中国茶文化">
                    <p>中国是茶的故乡，也是茶文化的发源地。茶的发现和利用，在中国已有四五千年历史，且长盛不衰，传遍全球。茶是中华民族的举国之饮，发于神农，闻于鲁周公，兴于唐朝，盛于宋代，普及于明清之时...</p>
                    <p>中国茶文化糅合佛、儒、道诸派思想，独成一体，是中国文化中的一朵奇葩。茶文化的精神内涵即是通过沏茶、赏茶、闻茶、饮茶、品茶等习惯和中华的文化内涵礼相结合形成的一种具有鲜明中国文化特征的文化现象...</p>
                    <a href="#" class="read-more">阅读全文</a>
                </article>
                
                <article class="blog-post">
                    <h2>茶具的艺术：从紫砂壶到青瓷杯</h2>
                    <div class="post-meta">
                        <span class="author">茶艺师</span>
                        <span class="date">2025年7月20日</span>
                    </div>
                    <img src="<%=basePath%>images/img/blog/lg-blog-bg.jpg" alt="茶具艺术">
                    <p>茶具，古代亦称茶器或茗器，泛指制茶、饮茶使用的器具。茶具按狭义的范围是指茶杯、茶壶、茶碗、茶盏、茶碟、茶盘等饮茶用具。中国的茶具，种类繁多，造型优美，除实用价值外，也有颇高的艺术价值...</p>
                    <p>紫砂茶具由陶器发展而成，属陶器茶具的一种。它坯质致密坚硬，取天然泥色，大多为紫砂，亦有红砂、白砂。成陶火度在1100—1200摄氏度，无吸水性，音粗韵长。它耐寒耐热，泡茶无熟汤味，能保真香...</p>
                    <a href="#" class="read-more">阅读全文</a>
                </article>
            </div>
            
            <!-- 右侧侧边栏 -->
            <aside class="blog-sidebar">
                <div class="sidebar-section">
                    <h3>茶文分类</h3>
                    <ul>
                        <li><a href="#">绿茶文化 <span class="category-count">(28)</span></a></li>
                        <li><a href="#">红茶品鉴 <span class="category-count">(35)</span></a></li>
                        <li><a href="#">乌龙茶研究 <span class="category-count">(19)</span></a></li>
                        <li><a href="#">普洱茶收藏 <span class="category-count">(24)</span></a></li>
                        <li><a href="#">茶具艺术 <span class="category-count">(16)</span></a></li>
                        <li><a href="#">茶道文化 <span class="category-count">(22)</span></a></li>
                    </ul>
                </div>
                
                <div class="sidebar-section">
                    <h3>最新评论</h3>
                    <div class="comment-item">
                        <p>茶道精神确实是一种生活哲学，感谢分享这么深刻的见解！</p>
                        <div class="comment-author">— 茶友小张</div>
                    </div>
                    <div class="comment-item">
                        <p>紫砂壶的选择确实很有讲究，这篇文章解决了我很多疑问。</p>
                        <div class="comment-author">— 茶艺爱好者</div>
                    </div>
                    <div class="comment-item">
                        <p>绿茶的保健功效确实显著，每天一杯绿茶已经成为我的习惯。</p>
                        <div class="comment-author">— 健康生活</div>
                    </div>
                </div>
                
                <div class="ad-banner">
                    <h4>Rongcha商城</h4>
                    <p>精选优质茶叶与茶具</p>
                    <a href="<%=basePath%>user/shop">立即选购 →</a>
                </div>
                
                <div class="sidebar-section">
                    <h3>关于我们</h3>
                    <div class="about-content">
                        <p>Rongcha-抹茶团队致力于传播茶文化，分享茶知识。我们是一群热爱茶文化的茶友，希望通过这个平台与更多爱茶之人交流心得，共同探索茶的奥妙。</p>
                        <img src="<%=basePath%>images/img/blog/lg-blog-bg.jpg" alt="茶室" style="width:100%; border-radius:4px; margin-top:20px;">
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- 固定在底部的页脚 -->
    <footer>
        <div class="container">
            <p>版权所有 &copy; 2025 Rongcha-抹茶 | 品味生活，共享茶香</p>
        </div>
    </footer>

    <!-- 原有底部脚本引入，保证项目功能完整性 -->
    <script src="<%=basePath%>js/vendor/jquery-1.12.4.min.js"></script>
    <script src="<%=basePath%>js/popper.min.js"></script>
    <script src="<%=basePath%>js/bootstrap.min.js"></script>
    <script src="<%=basePath%>js/owl.carousel.min.js"></script>
    <script src="<%=basePath%>js/isotope.pkgd.min.js"></script>
    <script src="<%=basePath%>js/ajax-form.js"></script>
    <script src="<%=basePath%>js/waypoints.min.js"></script>
    <script src="<%=basePath%>js/jquery.counterup.min.js"></script>
    <script src="<%=basePath%>js/imagesloaded.pkgd.min.js"></script>
    <script src="<%=basePath%>js/jquery.magnific-popup.min.js"></script>
    <script src="<%=basePath%>js/jquery.nice-select.min.js"></script>
    <script src="<%=basePath%>js/jquery-ui.min.js"></script>
    <script src="<%=basePath%>js/mainmenu.js"></script>
    <script src="<%=basePath%>js/script.js"></script>
</body>
</html>